<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>汽车管理系统 - 微信小程序模拟器</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
      background-color: #f8f8f8;
      min-height: 100vh;
    }

    /* 微信小程序模拟器样式 */
    .simulator {
      max-width: 375px;
      margin: 20px auto;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }

    .simulator-header {
      background: #000;
      color: #fff;
      text-align: center;
      padding: 10px 0;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- Vue应用将在这里渲染 -->
  </div>

  <!-- 模拟微信小程序的全局对象 -->
  <script>
    // 模拟微信小程序的全局API
    window.uni = {
      navigateTo: ({ url }) => {
        console.log('导航到:', url)
        // 这里可以实现路由逻辑
      },
      redirectTo: ({ url }) => {
        console.log('重定向到:', url)
        // 这里可以实现路由逻辑
      },
      navigateBack: () => {
        console.log('返回上一页')
        // 这里可以实现返回逻辑
      },
      showToast: ({ title, icon = 'none', duration = 2000 }) => {
        // 创建toast提示
        const toast = document.createElement('div')
        toast.textContent = title
        toast.style.cssText = `
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(0, 0, 0, 0.7);
          color: white;
          padding: 10px 20px;
          border-radius: 4px;
          z-index: 9999;
          font-size: 14px;
        `
        document.body.appendChild(toast)
        setTimeout(() => {
          document.body.removeChild(toast)
        }, duration)
      },
      showModal: ({ title, content, showCancel = true, success }) => {
        const confirmed = confirm(`${title}\n${content}`)
        if (success) {
          success({ confirm: confirmed, cancel: !confirmed })
        }
      },
      showActionSheet: ({ itemList, success }) => {
        const selected = itemList.findIndex(item =>
          confirm(`请选择操作：\n${itemList.join('\n')}\n\n点击确定选择：${item}`)
        )
        if (success && selected !== -1) {
          success({ tapIndex: selected })
        }
      },
      setStorageSync: (key, data) => {
        localStorage.setItem(key, JSON.stringify(data))
      },
      getStorageSync: (key) => {
        try {
          const data = localStorage.getItem(key)
          return data ? JSON.parse(data) : null
        } catch {
          return null
        }
      },
      removeStorageSync: (key) => {
        localStorage.removeItem(key)
      },
      clearStorageSync: () => {
        localStorage.clear()
      },
      getSystemInfo: ({ success }) => {
        if (success) {
          success({
            platform: 'devtools',
            system: 'Web',
            brand: 'Browser',
            model: 'Simulator',
            screenWidth: 375,
            screenHeight: 667,
            windowWidth: 375,
            windowHeight: 667,
            statusBarHeight: 20,
            safeArea: {
              bottom: 667,
              height: 647,
              left: 0,
              right: 375,
              top: 20,
              width: 375
            }
          })
        }
      },
      getSystemInfoSync: () => ({
        platform: 'devtools',
        system: 'Web',
        brand: 'Browser',
        model: 'Simulator'
      }),
      showLoading: ({ title = '加载中...', mask = false }) => {
        console.log('显示加载:', title)
      },
      hideLoading: () => {
        console.log('隐藏加载')
      },
      request: ({ url, method = 'GET', data, header, success, fail }) => {
        // 模拟网络请求
        console.log('发起请求:', { url, method, data, header })
        setTimeout(() => {
          if (success) {
            success({
              statusCode: 200,
              data: { code: 0, message: '模拟请求成功', data: null }
            })
          }
        }, 1000)
      }
    }

    // 模拟微信小程序环境变量
    window.wx = window.uni
  </script>

  <script type="module" src="/main.js"></script>
</body>

</html>